<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>02_元素属性操作</title>
		<!-- 元素属性操作：针对元素属性【固定属性，附加属性】 
		                  固定属性：<a href=“#”></a>
						  附加属性：<input type="radio" checked>
				attr()   有参 【一个值  属性】            获取匹配元素集合中第一个元素的指定属性值
						  语法：attract（“属性”）
						  理解：通过属性获取属性值
						  【2个值：属性和属性值】色湖之匹配元素集合中第一个元素的指定
						  属性和属性值
						  语法：attr（“属性”，“属性值”）
						  理解：通过属性和属性值  设置  元素样式效果
						  removeAttr() 有参   移除匹配元素集合中所有元素的指定属性
						  
		-->
         <script src="../js/jquery-1.11.1.js"></script>	
	</head>
	<body>
		<h1>attr()函数与removeAttr（）函数使用</h1>
		<!-- img 导入照片  创建三按钮  id="getAtteBtn"  id="setAttrBtn" 
		                                  id="removeAttrBtn"
										  div id"output"  用于测试
		-->
		<img src="../img/buy.png" alt="1"  id="myImg"/>
		<br />
		<button id="getAttrBtn">attr() 函数 获取</button>
		<button id="setAttBtn">attr() 函数 设置</button>
		<button id="removeAttrBtn">removeAttr() 函数 移除</button>
		<div id="output"></div>
		<h2>练习:attr()函数使用</h2>
		<button class="btn1">按钮1</button>
		<button class="btn2">按钮2</button>
		<button class="btn3">按钮3</button>
		<button class="btn4">按钮4</button>
		<button class="btn5">按钮5</button>
		<a href="#" target="_blank">百度一下</a>
		
		<p>lorem</p>
		<script>
			//元素<a href=“跳转6种”>
			//4， JQ操作：点击按钮1，实现，跳转：网页跳转www.baidu.com
			$(".btn1").click(function(){
				 window.location.href = "https://www.baidu.com";
			});
			//5.JQ操作：点击按钮2，实现，下载   <p align>    zip
			    $(".btn2").click(function() {
					
					
			         var url = ""; // 替换为实际文件的URL
			         var link = $("<a>");
			         link.attr("href", url);
			         link.attr("download", "欧文罚球"); // 设置下载的文件名（可选）
			         link[0].click(); // 触发下载
			    });
			
			//6.JQ操作：点击按钮3，实现，p元素实现居中
			
			
			
			
            //7.JQ操作;点击按钮4，实现，整个页面改变颜色<body bgcolor>
				            // 为按钮添加点击事件处理函数
				            $('.btn4').click(function () {
				                // 定义一个颜色数组
				                var colors = ['red', 'green', 'blue', 'yellow', 'purple'];
				                // 随机选择一个颜色
				                var randomColor = colors[Math.floor(Math.random() * colors.length)];
				                // 改变页面背景颜色
				                $('body').css('background-color', randomColor);
				            });
				       
				
				
			//8，JQ操作，点击按钮5没实现 上面豌豆射手--提示：玩你都射手		<img alt="提示"  title=“提示”>
			
			$(".btn5").click(function(){
				$("#myImg").attr("title","购物车")
			});
			
			
			
			
			
			
			
			//3.移除图片元素img  src属性  效果： 1
			/* $("#removeAttrBtn").click(function(){
				//removeAttr("src")   src移除
				$("#myImg").removeAttr("src");
				$("#output").text("图片src属性已经被移除");
			}); */
			//针对元素属性操作：获取--变量接受
			//1.获取属性值路径操作
/* $("#getAttrBtn").click(function(){
	var srcValue=$("#myImg").attr("src");
	//路径显示页面上去
	$("output").text("图片src路径");
}); */
			
		</script>
	</body>
</html>